<template>
  <div class="menu_detail_listconst">
    <section class="menu_detail_list">
      <div class="menu_detail_link" @click="FoodDetails(foodsList)">
        <div class="menu_food_img">
          <img :src="'//elm.cangdu.org/img/'+foodsList.image_path" alt="">
        </div>
        <div class="menu_food_description">
          <h3 class="food_description_head">
            <strong>{{foodsList.name}}</strong>
            <ul class="attributes_ul">
              <li :class="foodsList.attributes[0].icon_name=='新'?'attribute_new':''" v-if="foodsList.attributes[0]" :style=" 'border-color:' +'#'+foodsList.attributes[0].icon_color">
                <p>{{foodsList.attributes[0].icon_name=='新'?'新品':'招牌'}}</p>
              </li>
            </ul>
          </h3>
          <p class="food_description_content">{{foodsList.description}}</p>
          <p class="food_description_sale_rating">月售{{foodsList.month_sales}}份 好评率{{foodsList.satisfy_rate}}%</p>
          <p class="food_activity">
            <span v-if="foodsList.activity" :style="'border-color:' +'#'+foodsList.activity.icon_color+';'+'color:'+'#'+foodsList.activity.image_text_color">{{foodsList.activity.image_text}}</span>
          </p>
        </div>
      </div>
      <!-- 价格及按钮 -->
      <footer class="menu_detail_footer">
        <span class="food_price">¥{{foodsList.specfoods[0].price}}</span>
        <div class="Stepper">
          <svg class="icon icon1" aria-hidden="true" v-if="value!==0" @click="Reduction(foodsList.specfoods[0].price,foodsList.specfoods[0].food_id)">
            <use xlink:href="#icon-jjian-"></use>
          </svg>
          <span class="Steppernumber" v-if="value!==0">{{value}}</span>
          <span class="show_chooselist" @click="ShowCheck(foodsList.specfoods[0].food_id,foodsList.specfoods[0].sku_id)" v-if="foodsList.specifications[0]">选{{foodsList.specifications[0].name}}</span>
          <svg class="icon" aria-hidden="true" @click="content(foodsList.specfoods[0].price,foodsList.name,foodsList.specfoods[0].food_id,foodsList.specfoods[0].packing_fee,foodsList.specfoods[0].stock,foodsList.specfoods[0].sku_id,foodName1)" v-else>
            <use xlink:href="#icon-jia-yuankuang"></use>
          </svg>
        </div>
        <!-- 点击规格按钮的显示的弹框  @click="show = false"-->
        <van-overlay :show="show" z-index="100" v-model="show">
          <template #default>
            <div class="specs_list" v-if="show">
              <header class="specs_list_header">
                <h4 class="ellipsis">{{foodsList.name}}</h4>
                <van-icon name="cross" @click="show=false" />
              </header>
              <section class="specs_details">
                <h5 v-if="foodsList.specfoods.specs" class="specs_details_title">{{foodsList.specfoods.specs[0].name}}</h5>
                <ul>
                  <li :class="{specs_activity:Check ==index}" v-for="(item,index) in foodsList.specfoods" :key="index" @click="selected(item.specs[0].value,index,item.sku_id,item.food_id)">{{item.specs[0].value}}</li>
                </ul>
              </section>
              <footer class="specs_footer">
                <div class="specs_price">¥{{foodsList.specfoods[0].price}}</div>
                <div class="specs_addto_cart" @click="shopping(foodsList.specfoods[0].price,foodsList.name,foodsList.specfoods[0].packing_fee,foodsList.specfoods[0].stock)">加入购物车</div>
              </footer>
            </div>
          </template>
        </van-overlay>
      </footer>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    // 具体商品列表数据
    foodsList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //食物数量
      value: 0,
      //遮罩状态
      show: false,
      Check: 0,
      foodName: '默认',
      // 规格id
      sku_id: null,
      //食品id
      id: null,
      foodName1: ''
    }
  },
  methods: {
    //点击+号
    content(price, title, food_id, packing_fee, stock, skuid, foodName1) {
      this.value += 1
      const obj = {
        attrs: [],
        extra: {},
        id: food_id,
        name: title,
        packing_fee: packing_fee,
        price: price,
        quantity: this.value,
        sku_id: skuid,
        specs: new Array(foodName1),
        stock: stock
      }
      this.$store.commit('add', obj)
    },
    //点击-号
    Reduction(price, food_id) {
      this.value -= 1
      const obj = {
        price: price,
        id: food_id
      }
      this.$store.commit('add1', obj)
    },
    // 选择规格里面的属性状态
    selected(item, index, sku_id, food_id) {
      this.Check = index
      if (this.Check == index) {
        this.foodName = item
      }
      this.sku_id = sku_id
      this.id = food_id
    },
    //将规格的价格加入购物车中
    shopping(price, title, packing_fee, stock) {
      this.show = false
      this.value += 1
      const obj = {
        attrs: [],
        extra: {},
        id: this.id,
        name: title,
        packing_fee: packing_fee,
        price: price,
        quantity: this.value,
        sku_id: this.sku_id,
        specs: new Array(this.foodName),
        stock: stock
      }
      this.$store.commit('add', obj)
    },
    FoodDetails(foodsList) {
      const obj = {
        image_path: foodsList.image_path,
        description: foodsList.description,
        title: foodsList.name,
        rating: foodsList.rating,
        month_sales: foodsList.month_sales,
        price: foodsList.specfoods[0].price,
        rating_count: foodsList.rating_count,
        satisfy_rate: foodsList.satisfy_rate
      }
      // 触发mutations 并传递obj的数据
      this.$store.commit('FoodAdd', obj)
      // 跳转路由
      this.$router.push('/Details/FoodDetails')
    },
    // 点击选规格把默认的食品ID和规格ID存入
    ShowCheck(food_id, skuid) {
      this.sku_id = skuid
      this.id = food_id
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.menu_detail_list {
  background-color: #fff;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  overflow: hidden;
  .menu_detail_link {
    display: flex;
    .menu_food_img {
      margin-right: 0.4rem;
      > img {
        width: 2rem;
        height: 2rem;
        display: block;
      }
    }
    .menu_food_description {
      width: 100%;
      .food_description_head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2rem;
        .description_foodname {
          font-size: 0.7rem;
          color: #333;
        }
        .attributes_ul {
          display: flex;
          > li {
            font-size: 0.45rem;
            height: 0.6rem;
            line-height: 0.4rem;
            padding: 0.1rem;
            border: 1px solid #666;
            border-radius: 0.3rem;
            margin-right: 0.1rem;
            transform: scale(0.8);
            > p {
              white-space: nowrap;
              color: rgb(240, 115, 115);
            }
          }
          .attribute_new {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #4cd964;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: flex-end;
            transform: rotate(-45deg) translate(-0.1rem, -1.5rem);
            border: none;
            border-radius: 0;
            > p {
              font-size: 0.4rem;
              color: rgb(255, 255, 255);
              text-align: center;
              flex: 1;
              transform: scale(0.8) translate(0.1rem, -0.1rem);
            }
          }
        }
      }

      .food_description_sale_rating {
        line-height: 0.8rem;
        font-size: 0.5rem;
        color: #333;
      }
      .food_activity {
        line-height: 0.4rem;
        span {
          border: 1px solid currentColor;
          border-radius: 0.3rem;
          padding: 0.08rem;
          display: inline-block;
          transform: scale(0.8);
          margin-left: -0.35rem;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.menu_detail_footer {
  margin-left: 2.4rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.Stepper {
  display: flex;
  align-items: center;

  .Steppernumber {
    margin: 0 0.3rem;
  }
}
.icon {
  width: 0.83rem;
  height: 0.83rem;
  color: #3190e8;
}
.icon1 {
  width: 0.77rem;
  height: 0.77rem;
}
.show_chooselist {
  display: block;
  font-size: 0.55rem;
  color: #fff;
  padding: 0.1rem 0.2rem;
  background-color: #3190e8;
  border-radius: 0.2rem;
  border: 1px solid #3190e8;
}
.specs_list {
  position: fixed;
  top: 30%;
  left: 15%;
  width: 70%;
  background-color: #fff;
  z-index: 18;
  border: 1px;
  border-radius: 0.2rem;
  .specs_list_header {
    .ellipsis {
      font-size: 0.7rem;
      color: #222;
      font-weight: 400;
      text-align: center;
      padding: 0.5rem;
    }
    .van-icon-cross {
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
    }
  }
  .specs_details {
    padding: 0.5rem;
    .specs_details_title {
      font-size: 0.6rem;
      color: #666;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0.4rem 0;
      .specs_activity {
        border-color: #3199e8;
        color: #3199e8;
      }
      li {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
        border: 0.025rem solid #ddd;
        border-radius: 0.2rem;
        margin-right: 0.5rem;
        margin-bottom: 0.2rem;
      }
    }
  }
  .specs_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 0.5rem;
    border: 1px;
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    .specs_price {
      font-size: 0.7rem;
      font-weight: 700;
      color: #ff6000;
    }
    .specs_addto_cart {
      width: 4rem;
      height: 1.3rem;
      background-color: #3199e8;
      border: 1px;
      border-radius: 0.15rem;
      font-size: 0.6rem;
      color: #fff;
      text-align: center;
      line-height: 1.3rem;
    }
  }
}
</style>